<template>
  <div class="app-container" style="width:100%;height:100%;">
    <el-aside style="padding-right: 10px;height:100%; padding-left: 15px; padding-top: 0px;float:left;width:20%;background:none;">
      <div
        class="block"
        style="width:100%;height:100%;"
      >
        <el-tree
          id="el-tree"
          ref="tree"
          :render-content="renderContent"
          class="filter-tree"
          :data="data2"
          node-key="id"
          :highlight-current="true"
          :props="defaultProps"
          :default-expanded-keys="TreeArr"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </div>
    </el-aside>
    <!-- 分割线 -->
    <el-divider direction="vertical" />
    <!-- background:none; -->
    <el-aside style="padding-right: 5px; padding-left: 15px; padding-top: 0px;float:left;width:80%;color:#fff;background:none;">
      <div
        class="filter-container"
        style="margin-top:0px;padding-bottom: 0px;"
      >
        <div class="box1">
          <el-button class="filter-item" icon="el-icon-upload" type="primary" @click="uploadFile()">单文件上传</el-button>
          <el-button class="filter-item" icon="el-icon-upload" type="primary" @click="uploadFiles()">多文件上传</el-button>
        </div>

        <div class="box2">
          <el-input
            v-model="queryPage.name"
            class="filter-item"
            placeholder="文档名"
            style="width: 150px"
            clearable
          />
          <el-tooltip
            class="item"
            content="查询"
            placement="top"
            effect="light"
          >
            <el-button
              class="filter-item"
              icon="el-icon-search"
              type="primary"
              @click="search()"
            />
          </el-tooltip>
          <el-button
            class="filter-item"
            icon="el-icon-thumb"
            type="primary"
            @click="handleRetrieval"
          >高级检索</el-button>
        </div>
      </div>

      <el-table
        v-if="displayVisible"
        v-loading="listLoading"
        :data="numList"
        :height="tableHeight4"
        tooltip-effect="dark"
        style="width: 100%; overflow:auto;color:#474a4d;font-family:黑体;font-weight:normal;font-size:14px"
        @cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave"
        @cell-dblclick="tableDbEdit"
      >
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="80px"
        />
        <el-table-column
          header-align="center"
          align="left"
          label="文档名"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <img
              style="position: absolute;top:14px"
              src="../../../assets/images/Folder-02.png"
              width="18px"
              height="18px"
            >
            <label style="margin-left:40px;width:160px;">
              <label>{{ scope.row.originalName }}</label>
            </label>

            <label style="position: absolute;right:40px;display:none;color:#409eff;">
              <label
                class="btn3"
                @click.stop="download(scope)"
              >
                <i
                  class="el-icon-download"
                  title="下载"
                />
              </label>
            </label>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="right"
          label="大小"
          width="100px"
        >
          <span>-</span>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="left"
          label="创建人员"
          width="180px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createuserName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="right"
          label="创建时间"
          width="180px"
        >
          <template slot-scope="scope">
            {{ scope.row.createtimeTi }}
          </template>
        </el-table-column>
      </el-table>

      <el-table
        v-show="displayVisible1"
        v-loading="listLoading"
        :data="userList"
        :height="tableHeight4"
        tooltip-effect="dark"
        style="width: 100%; overflow:auto;color:#474a4d;font-family:黑体;font-weight:normal;font-size:14px"
        @cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave"
        @cell-dblclick="tableDbEdit"
      >
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="80px"
        />
        <el-table-column
          header-align="center"
          align="left"
          label="文档名"
          show-overflow-tooltip
        >
          <template slot-scope="scope">

            <img
              v-if="!scope.row.suffix"
              style="position: absolute;top:14px"
              src="../../../assets/images/Folder-02.png"
              width="18px"
              height="18px"
            >
            <img
              v-else-if="scope.row.suffix==='docx' || scope.row.suffix==='doc'"
              style="position: absolute;top:14px"
              src="../../../assets/images/Word.png"
              width="18px"
              height="18px"
            >
            <img
              v-else-if="scope.row.suffix==='xlsx' || scope.row.suffix==='xls'"
              style="position: absolute;top:14px"
              src="../../../assets/images/Excel.png"
              width="18px"
              height="18px"
            >
            <img
              v-else-if="['png','jpeg','jpg'].includes(scope.row.suffix)"
              style="position: absolute;top:14px"
              src="../../../assets/images/Picture.png"
              width="18px"
              height="18px"
            >
            <img
              v-else-if="['mp4','mpeg','avi','navi','asf','mov','3gp','wmv','divx','xvid','rm','rmvb','flv','f4v'].includes(scope.row.suffix)"
              style="position: absolute;top:14px;"
              src="../../../assets/images/Video.png"
              width="18px"
              height="18px"
            >
            <img
              v-else-if="['mp3','flac','wav','flac'].includes(scope.row.suffix)"
              style="position: absolute;top:14px;"
              src="../../../assets/images/Voice.png"
              width="18px"
              height="18px"
            >
            <img
              v-else-if="scope.row.suffix==='pdf'"
              style="position: absolute;top:14px"
              src="../../../assets/images/PDF.png"
              width="18px"
              height="18px"
            >
            <img
              v-else-if="scope.row.suffix==='ppt' || scope.row.suffix==='pptx'"
              style="position: absolute;top:14px"
              src="../../../assets/images/PPT.png"
              width="18px"
              height="18px"
            >
            <img
              v-else-if="scope.row.suffix==='txt'"
              style="position: absolute;top:14px"
              src="../../../assets/images/TXT.png"
              width="18px"
              height="18px"
            >
            <img
              v-else-if="['zip','rar','7z'].includes(scope.row.suffix)"
              style="position: absolute;top:14px"
              src="../../../assets/images/Zip.png"
              width="18px"
              height="18px"
            >
            <img
              v-else
              style="position: absolute;top:14px"
              src="../../../assets/images/Unknown.png"
              width="18px"
              height="18px"
            >
            <label style="margin-left:40px;width:160px;">
              <span v-if="['png','jpeg','jpg','pdf','docx','doc','txt','ppt','pptx','xlsx','xls','mp4','mpeg','avi','navi','asf','mov','3gp','wmv','divx','xvid','rm','rmvb','flv','f4v','mp3','flac','wav','flac'].includes(scope.row.suffix)">
                <a
                  style="color:#606266;"
                  target="_blank"
                  @click="yulan(scope)"
                  v-html="scope.row.originalName"
                />
              </span>
              <span v-else>{{ scope.row.originalName }}</span>
            </label>
            <label style="float:right;width:100px;margin-left:10px;display:none;color:#409eff">
              <label
                class="btn3"
                @click.stop="download(scope)"
              >
                <i
                  class="el-icon-download"
                  title="下载"
                />
              </label>
              <label
                v-if="scope.row.suffix !== '' && scope.row.suffix !== 'null'"
                class="btn3"
                @click.stop="ShowHidden = !ShowHidden"
              >
                <i
                  class="el-icon-more-outline"
                  title="更多"
                />
              </label>
              <label
                v-if="ShowHidden"
                class="btn1"
              >
                <label
                  v-if="scope.row.suffix !== '' && scope.row.suffix !== 'null'"
                  class="btn2"
                  @click.stop="copy(scope,'移动到','file',false)"
                >
                  <i
                    class="el-icon-rank"
                    title="移动"
                  /> <span>移动</span>
                </label>
                <label
                  v-if="scope.row.suffix !== '' && scope.row.suffix !== 'null'"
                  class="btn2"
                  @click.stop="copy(scope,'复制到','file',true)"
                >
                  <i
                    class="el-icon-copy-document"
                    title="复制"
                  /> <span>复制</span>
                </label>
                <label
                  v-if="scope.row.suffix !== '' && scope.row.suffix !== 'null'"
                  class="btn2"
                  @click.stop="collect(scope)"
                >
                  <i
                    class="el-icon-star-on"
                    title="收藏"
                  /> <span>收藏</span>
                </label>
                <label
                  v-if="scope.row.suffix !== '' && scope.row.suffix !== 'null'"
                  class="btn2"
                  @click.stop="removeFi(scope)"
                >
                  <i
                    class="el-icon-delete-solid"
                    title="删除"
                  /> <span>删除</span>
                </label>
                <label
                  v-if="scope.row.suffix !== '' && scope.row.suffix !== 'null'"
                  class="btn2"
                  @click.stop="history(scope)"
                >
                  <i
                    class="el-icon-s-data"
                    title="历史记录"
                  /> <span>历史记录</span>
                </label>
                <label
                  v-if="scope.row.type === 'M' && scope.row.isEdit === '2' && scope.row.suffix !== '' && scope.row.suffix !== 'null'"
                  class="btn2"
                  @click.stop="evaluateList(scope)"
                >
                  <i
                    class="el-icon-star-on"
                    title="查看评价"
                  /> <span>查看评价</span>
                </label>
              </label>
            </label>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="right"
          label="大小"
          width="160px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.fileSize === '-'">-</span>
            <span v-else>{{ scope.row.fileSize }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="left"
          label="创建人员"
          width="180px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createuserName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="right"
          label="创建时间"
          width="180px"
        >
          <template slot-scope="scope">
            {{ scope.row.createtimeTi }}
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="displayVisible1 && total>-1"
        :total="total"
        :page.sync="queryPage.page"
        :limit.sync="queryPage.limit"
        @pagination="loadList"
      />

      <el-dialog
        :visible.sync="addGroupVisible"
        append-to-body
        :close-on-click-modal="false"
        width="1000px"
        title="目录管理"
        :close="getList"
      >
        <addGroup
          v-if="addGroupVisible"
          ref="addGroup"
          style="height:540px"
          :visible.sync="addGroupVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="dialogEditVisible"
        width="600px"
        :close-on-click-modal="false"
        append-to-body
        :show-close="false"
        :title="'重命名'"
      >
        <dialog-edit
          v-if="dialogEditVisible"
          ref="dialogEdit"
          :proid="code"
          :visible.sync="dialogEditVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="uploadFileVisible"
        width="800px"
        :close-on-click-modal="false"
        append-to-body
        :show-close="false"
        :title="'单文件上传'"
      >
        <upload-file
          v-if="uploadFileVisible"
          ref="uploadFile"
          :link="linkId"
          :flag="flag"
          :visible.sync="uploadFileVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="uploadFilesVisible"
        width="800px"
        :close-on-click-modal="false"
        append-to-body
        :show-close="false"
        :title="'多文件上传'"
      >
        <upload-files
          v-if="uploadFilesVisible"
          ref="uploadFiles"
          :link="linkId"
          :flag="flag"
          :visible.sync="uploadFilesVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="editFileVisible"
        width="800px"
        append-to-body
        :show-close="false"
        :title="'编辑'"
        :close-on-click-modal="false"
      >
        <edit-file
          v-if="editFileVisible"
          ref="editFile"
          :proid="code"
          :visible.sync="editFileVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="historyVisible"
        width="1200px"
        append-to-body
        :title="'历史记录'"
        :close-on-click-modal="false"
      >
        <history
          v-if="historyVisible"
          ref="history"
          :history="batchCode"
          :visible.sync="historyVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="evaluateListVisible"
        width="1000px"
        append-to-body
        :title="'评价列表'"
        :close-on-click-modal="false"
      >
        <evaluate-list
          v-if="evaluateListVisible"
          ref="evaluateList"
          :proid="code"
          :visible.sync="evaluateListVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="xmViewVisible"
        append-to-body
        width="640px"
        title="预览"
        :close-on-click-modal="false"
      >
        <xm-view
          v-if="xmViewVisible"
          ref="xmView"
          :proid="code"
          :visible.sync="xmViewVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="viewPdfVisible"
        append-to-body
        width="1200px"
        title="预览"
        :close-on-click-modal="false"
      >
        <view-pdf
          v-if="viewPdfVisible"
          ref="viewPdf"
          :proid="code"
          :visible.sync="viewPdfVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="dialogAuthVisible"
        append-to-body
        width="640px"
        title="权限分配"
        :close-on-click-modal="false"
      >
        <dialogAuth
          v-if="dialogAuthVisible"
          ref="dialogAuth"
          :proid="code"
          :flag="type"
          :visible.sync="dialogAuthVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="dialogTreeVisible"
        :title="handleMoveTitle"
      >
        <dialogTree
          v-if="dialogTreeVisible"
          ref="dialogTree"
          style="height:540px"
          :proid="typeFlag"
          :operation="operationCopy"
          :dataform="dataDialog"
          :visible.sync="dialogTreeVisible"
        />
      </el-dialog>

    </el-aside>
  </div>
</template>

<script>

import { getNewListPage, getFirstPageList, downloadFile, deleteInLogic, saveQuantity, download, saveRecords } from '@/api/publicFile'
// import { deleteInLogic, getInitialLoading, getAgainLoading } from '@/api/publicCatalog'
import { getInitialLoading2, getAgainLoading } from '@/api/catalogDetail'
import { saveCollect } from '@/api/publicFileCollect'
import { Message, MessageBox } from 'element-ui'
import { tableHeight4 } from '@/utils/tableHeight'
import Pagination from '@/components/Pagination'

import AddGroup from './addGroup'
import DialogEdit from './edit' // eslint-disable-line no-unused-vars
import UploadFile from './uploadFile' // eslint-disable-line no-unused-vars
import EditFile from './uploadFile1' // eslint-disable-line no-unused-vars
import history from './history' // eslint-disable-line no-unused-vars
import evaluateList from './evaluateList' // eslint-disable-line no-unused-vars
import XmView from './viewPhoto' // eslint-disable-line no-unused-vars
import ViewPdf from './viewPdf' // eslint-disable-line no-unused-vars
import DialogAuth from './authority' // eslint-disable-line no-unused-vars
import UploadFiles from './uploadFiles' // eslint-disable-line no-unused-vars
import DialogTree from './copyTree' // eslint-disable-line no-unused-vars

export default {
  name: 'Zzjg',
  components: { Pagination, AddGroup, DialogEdit, UploadFile, EditFile, history, evaluateList, XmView, ViewPdf, DialogAuth, UploadFiles, DialogTree },
  mixins: [tableHeight4],
  provide() {
    return {
      getList: this.onloadList
    }
  },
  data() {
    return {
      TreeArr: [],
      typeFlag: '',
      operationCopy: true,
      dialogTreeVisible: false,
      handleMoveTitle: '',
      listLoading: false,
      displayVisible: false,
      total: 0,
      displayVisible1: false,
      userList: [],
      numList: [],
      seen: true,
      addGroupVisible: false,
      dialogEditVisible: false,
      uploadFileVisible: false,
      uploadFilesVisible: false,
      editFileVisible: false,
      evaluateListVisible: false,
      historyVisible: false,
      xmViewVisible: false,
      viewPdfVisible: false,
      dialogAuthVisible: false,
      data: [],
      data2: [],
      queryPage: {
        page: 1,
        limit: 20,
        name: ''
      },
      form: {},
      rules: {
        typeName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      },
      name: '',
      code: '',
      flag: '',
      batchCode: '',
      parent: '',
      parentId: '',
      parentName: '',
      linkId: '',
      dataDialog: {}, // 移动或复制的数据
      defaultProps: {
        children: 'children',
        label: 'typeName'
      },
      ShowHidden: false,
      // 面包屑导航
      a: [],
      // 内容区标题
      contitle: '',
      // 内容区信息
      contents: {
        content: '',
        uptime: ''
      },
      // tree规定数据格式
      treeProps: {
        label: 'title',
        children: 'children'
      },
      filterText: '',
      img1: require('../../../assets/images/Folder-01.png'),
      type: '',
      gftIdnew: '',
      dis: true,
      dataId: '',
      IdArr: []
    }
  },

  created() {
    this.gftIdnew = this.$route.query.gftId
    this.getList()
    this.getTreeList()
    this.onLodding()
  },
  mounted() {
    document.addEventListener('click', this.HiddenClick)
  },
  methods: {
    onloadList() {
      // 重新加载表格
      // this.getTreeList()
      this.loadList()
    },
    onLodding() {
      if (this.gftIdnew !== null && this.gftIdnew !== 'null' && this.gftIdnew !== '' && this.gftIdnew !== undefined) {
        this.displayVisible = false
        this.displayVisible1 = true

        this.queryPage.type = this.gftIdnew
        this.queryPage.flag = 'M'
        getNewListPage(this.queryPage).then(response => {
          const { data } = response

          this.userList = data.records
          this.total = parseInt(data.total)
          this.listLoading = false
        }).catch(response => {
          this.listLoading = false
        })
      }
    },
    getList() {
      this.displayVisible = true
      this.displayVisible1 = false
      getFirstPageList({ flag: 'M' }).then(response => {
        this.numList = response.data
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    hlfp(scope) {
      this.displayVisible = false
      this.displayVisible1 = true

      this.queryPage.type = scope.row.gftId
      this.queryPage.flag = 'M'
      getNewListPage(this.queryPage).then(response => {
        const { data } = response

        this.userList = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    search() { // 查询
      this.displayVisible = false
      this.displayVisible1 = true

      this.loadList()
    },
    getTreeList() { // 加载列表
      this.data = []

      getInitialLoading2().then(response => {
        this.data = response.data

        this.data2 = this.buildTree2(this.data)
        this.data2.forEach(m => {
          this.TreeArr.push(m.id)
        })
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    buildTree2(data) {
      var rdata = []
      for (let i = 0; i < data.length; i++) {
        var e1 = data[i]
        if (e1.parentId === '1') {
          rdata.push(e1)
        }
        for (let j = 0; j < data.length; j++) {
          var e2 = data[j]
          if (e1.parentId === e2.id) {
            if (!e2.children) {
              e2.children = []
            }
            e2.children.push(e1)
          }
        }
      }
      return rdata
    },
    loadList() { // 加载列表
      this.userList = []
      this.listLoading = true

      this.queryPage.flag = 'M'
      getNewListPage(this.queryPage).then(response => {
        const { data } = response

        this.userList = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    handleAddGroup() {
      this.addGroupVisible = true
      this.$nextTick(() => {
        this.$refs.addGroup
      })
    },
    handleRetrieval() {
      this.$router.push({
        path: '/all/ggzy/gjjs', query: { menuId: 'M' }
      })
    },
    handleEdit1(scope) {
      this.dialogEditVisible = true
      this.code = scope.row.gftId
      this.$nextTick(() => {
        this.$refs.dialogEdit
        this.$refs.dialogEdit.getDetailed()
      })
    },
    handleNodeClick(data) {
      var dataA = data

      this.displayVisible = false
      this.displayVisible1 = true

      this.linkId = data.id
      this.flag = data.flag
      this.parent = data.parentId

      if (!this.IdArr.includes(dataA.id)) {
        // 树
        getAgainLoading({ parentId: dataA.id }).then(response => {
          if (!dataA.children) {
            this.$set(dataA, 'children', [])
            response.data.forEach(newChild => {
              dataA.children.push(newChild)
            })
            this.IdArr.push(dataA.id)
            this.dataId = dataA.id
          } else {
            return
          }

          this.listLoading = false
        }).catch(response => {
          this.listLoading = false
        })
      }

      this.queryPage.type = data.id
      this.queryPage.flag = this.flag
      getNewListPage(this.queryPage).then(response => {
        const { data } = response
        this.userList = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    // 提示框
    renderContent: function(h, { node, data, store }) {
      var text = data.typeName
      if (text.length > 15) {
        return (
          < span >
            < i > <img src={this.img1} style='width: 18px;height: 18px;margin-right:5px;padding-top:1px' /></i>
            <el-tooltip class='item' id='tool' effect='light' popper-class='draw' visible-arrow='false' content={data.typeName} placement='bottom-start' >
              <span class='style-demo' >{data.typeName}</span >
            </el-tooltip>
          </span>)
      } else {
        return (
          < span >
            < i > <img src={this.img1} style='width: 18px;height: 18px;margin-right:5px;padding-top:1px' /></i>
            <span class='style-demo' >{data.typeName}</span >
          </span>
        )
      }
    },
    handleIn(id, node, data) {
      this.flag = data.flag
      this.queryPage.type = id
      this.queryPage.flag = this.flag
      getNewListPage(this.queryPage).then(response => {
        const { data } = response
        this.userList = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    uploadFile() {
      if (this.parent !== '-1') {
        if (this.linkId !== null && this.linkId !== '') {
          this.uploadFileVisible = true
          this.$nextTick(() => {
            this.$refs.uploadFile
          })
        } else {
          Message({
            message: '请选择节点！',
            type: 'error',
            duration: 5 * 1000
          })
        }
      } else {
        Message({
          message: '请选择子节点！',
          type: 'error',
          duration: 5 * 1000
        })
      }
    },
    editFile(scope) {
      this.editFileVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.editFile
      })
    },
    history(scope) {
      this.historyVisible = true
      this.batchCode = scope.row.batchCode
      this.$nextTick(() => {
        this.$refs.history
      })
    },
    evaluateList(scope) {
      this.evaluateListVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.evaluateList
      })
    },
    yulan(scope) {
      saveQuantity({ fileId: scope.row.id, views: '1' }).then(response => {
        saveRecords({ fileId: scope.row.id, flag: '1' }).then(response => {
        })
      })
      const routeData = this.$router.resolve({
        path: '/ggzy/yulan/list',
        query: {
          menuId: scope.row.id
        }
      })
      window.open(routeData.href, '_blank')
    },
    removeFi(scope) {
      MessageBox.confirm('确认删除', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deleteInLogic({ ids: scope.row.id, status: '-1' }).then(response => {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 5 * 1000
          })
          loading.close()
          // this.getTreeList()
          this.loadList()
        })
      })
    },
    copy(scope, title, type, cOm) {
      this.dialogTreeVisible = true
      this.dataDialog = scope.row
      this.handleMoveTitle = title
      this.operationCopy = cOm
      if (this.dataDialog.suffix !== '') {
        this.typeFlag = 'file'
      } else {
        this.typeFlag = 'catalog'
      }
    },
    download(scope) {
      if (!scope.row.suffix) {
        const loading = this.$loading({
          lock: true,
          text: '下载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        download({ id: scope.row.id, type: scope.row.type }).then(response => {
          var fileName = 'download.zip'
          const contentDisposition = response.headers['content-disposition']
          if (contentDisposition) {
            fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1], 'UTF-8')
          }

          const blob = new Blob([response.data], {
            type: `application/zip` // word文档为msword,pdf文档为pdf
          })
          const objectUrl = URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = objectUrl
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          // 释放内存
          window.URL.revokeObjectURL(link.href)
          loading.close()
        }).catch(() => {
          loading.close()
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '下载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        downloadFile({ id: scope.row.id }).then(response => {
          loading.close()
          var fileName = scope.row.originalName
          const contentDisposition = response.headers['content-disposition']
          if (contentDisposition) {
            fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1], 'UTF-8')
          }
          const blob = new Blob([response.data], {
            type: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` // word文档为msword,pdf文档为pdf
          })
          const objectUrl = URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = objectUrl
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          // 释放内存
          window.URL.revokeObjectURL(link.href)

          saveQuantity({ fileId: scope.row.id, downloads: '1' }).then(response => {
          })

          saveRecords({ fileId: scope.row.id, flag: '2' }).then(response => {
          })
        })
      }
    },
    // 点击页面事件 隐藏需要隐藏的区域
    HiddenClick() {
      this.ShowHidden = false
    },
    // 鼠标划入展示
    enter() {
      this.seen = true
      this.ShowHidden = false
    },
    // 鼠标移除隐藏
    leave() {
      this.seen = false
      this.ShowHidden = false
    },
    // 鼠标移入行
    cellMouseEnter(row, column, cell, event) {
      // 显示操作条  找一个特殊的条件判断，否则影响其他元素
      if (cell.firstChild.className.trim() === 'cell el-tooltip') {
        cell.firstChild.lastChild.style.display = 'inline'
        this.ShowHidden = false
      }
    },
    cellMouseLeave(row, column, cell, event) {
      // 隐藏操作条
      if (cell.firstChild.className.trim() === 'cell el-tooltip') {
        cell.firstChild.lastChild.style.display = 'none'
        this.ShowHidden = false
      }
    },
    handleAuth(scope) {
      this.dialogAuthVisible = true
      this.type = 'M'
      if (!scope.row.suffix) {
        this.code = scope.row.id
      } else {
        this.code = scope.row.batchCode
      }
      this.$nextTick(() => {
        this.$refs.dialogAuth
      })
    },
    tableDbEdit(row, column, cell, event) {
      if (column.label === '文档名') {
        this.displayVisible = false
        this.displayVisible1 = true

        this.queryPage.type = row.gftId
        this.queryPage.flag = 'M'
        getNewListPage(this.queryPage).then(response => {
          const { data } = response

          this.userList = data.records
          this.total = parseInt(data.total)
          this.listLoading = false
        }).catch(response => {
          this.listLoading = false
        })
      }
    },
    collect(scope) { // 新增
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      saveCollect({ fileId: scope.row.batchCode }).then(response => {
        Message({
          message: '收藏成功',
          type: 'success',
          duration: 5 * 1000
        })
        loading.close()
        // 重新加载表格
        // this.getTreeList()
      }).catch(response => {
        loading.close()
      })
    },
    uploadFiles() {
      if (this.parent !== '-1') {
        if (this.linkId !== null && this.linkId !== '') {
          this.uploadFilesVisible = true
          this.$nextTick(() => {
            this.$refs.uploadFiles
          })
        } else {
          Message({
            message: '请选择节点！',
            type: 'error',
            duration: 5 * 1000
          })
        }
      } else {
        Message({
          message: '请选择子节点！',
          type: 'error',
          duration: 5 * 1000
        })
      }
    }
  }
}
</script>

<style scoped>
label {
  font-weight: normal;
}
/* 右键会选中文字，为了美观将它禁用*/
#el-tree {
  user-select: none;
  height: 100%;
}
#el-tree >>> .style-demo {
  color: #474a4d;
  font-size: 14px;
  font-family: "黑体";
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#tool {
  background-color: red !important;
}
/* 提示框箭头 */
.el-tree-node__content >>> .draw[x-placement^="bottom"] .popper__arrow:after {
  border-bottom-color: red !important;
}

.el-tree-node__content >>> .draw[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: red !important;
}
#el-tree >>> .draw {
  background: red !important;
}
#el-tree >>> .el-tooltip .style-demo .item {
  background-color: red !important;
}

.el-tree-node__label {
  font-size: 14px;
  font-family: "黑体";
  color: #474a4d;
  font-weight: 100;
}
.el-aside {
  overflow: hidden;
}
/* 分割线长度 */
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 89%;
  position: absolute;
  margin-top: -18px;
}
.filter-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 10px;
}
.box1 {
  flex: 1;
  padding-left: 25px;
  vertical-align: middle;
}
.box2 {
  flex: 1;
  text-align: end;
}

.menu1 {
  width: 120px;
  position: fixed;
  border: 1px solid #ccc;
  font-size: 14px;
  font-family: "黑体";
  color: #474a4d;
  font-weight: 100;
  background-color: white;
  list-style: none;
  padding-left: 10px;
}
.menu2 {
  width: 120px;
  position: fixed;
  font-size: 14px;
  font-family: "黑体";
  color: #474a4d;
  font-weight: 100;
  border: 1px solid #ccc;
  background-color: white;
  list-style: none;
  padding-left: 10px;
}
li span {
  padding-left: 5px;
  color: #828282;
}
#menu_item {
  line-height: 20px;
  text-align: left;
  margin-top: 10px;
  display: inherit;
  color: #409eff;
}
.el-breadcrumb {
  font-size: 14px;
  font-family: "黑体";
  color: #909399;
  font-weight: 100;
  padding: 10px 0px 10px 20px;
}

.el-breadcrumb >>> .el-breadcrumb__inner {
  color: #606266;
  font-size: 14px;
  font-family: "黑体";
  font-weight: 200;
}
.el-breadcrumb >>> .el-breadcrumb__inner a:hover {
  cursor: pointer;
}
.btn1 {
  margin-top: 25px;
  margin-left: 60px;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  right: 0;
  color: #409eff;
  border: 1px solid #ccc;
  z-index: 999;
  text-align: left;
}
.btn2 {
  padding: 5px 10px;
  margin: 0px 0px;
  cursor: pointer;
  text-align: left;
  display: block;
  border-bottom: 1px solid #ccc;
}
.btn2 span {
  color: #828282;
}
.btn3 {
  margin: 0px 5px;
  cursor: pointer;
  display: inline-block;
}
</style>
